import 'package:flutter/material.dart';
import 'line_charts.dart';
import 'package:al_pay_flutter/pages/untils/screen.dart';

import 'line_echarts.dart';

class FinanceChartPage extends StatefulWidget {
  @override
  _FinanceChartPageState createState() => _FinanceChartPageState();
}

class _FinanceChartPageState extends State<FinanceChartPage>
    with SingleTickerProviderStateMixin {
  final tabs = ['累计盈亏', '业绩走势', '净值估算'];
  TabController tabController;
  Widget conmonbox(
      {String title,
      num money = 0,
      bool isRate = false,
      CrossAxisAlignment crossAxisAlignment}) {
    return Column(
      children: <Widget>[
        Text(
          title ?? '',
          style: TextStyle(fontSize: 28.w, color: Colors.black38),
        ),
        Text(
          money > 0
              ? '+' + money.toString() + (isRate ? '%' : '')
              : '-' + money.toString() + (isRate ? '%' : ''),
          style: TextStyle(
              fontSize: 36.w,
              color: money > 0 ? Color(0xffF05424) : Colors.green,
              height: 1.6),
        )
      ],
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: crossAxisAlignment ?? CrossAxisAlignment.center,
    );
  }

  Widget ownIconBtn(e) {
    return GestureDetector(
      child: Column(
        children: <Widget>[
          Icon(
            IconData(e['icon'], fontFamily: 'iconfont'),
            color: Colors.grey,
          ),
          Container(
            child: Text(
              e['title'],
              style: TextStyle(color: Colors.black87),
            ),
            padding: EdgeInsets.only(top: 6),
          )
        ],
      ),
      onTap: e['event'],
    );
  }

  List<Widget> getWidgetList(BuildContext context) {
    final config = [
      {
        'icon': 0xe68d,
        'event': () {},
        'title': '收益明细',
      },
      {
        'icon': 0xe60e,
        'event': () {},
        'title': '交易记录',
      },
      {
        'icon': 0xe6ce,
        'event': () {},
        'title': '我的定投',
      },
    ];
    return config
        .map(
          (e) => ownIconBtn(e),
        )
        .toList();
  }

  Widget cardBox(
      {Widget child,
      double height,
      EdgeInsetsGeometry padding,
      magrgin,
      border,
      borderRadius}) {
    return Container(
        child: child,
        width: 750.w - 32,
        height: height ?? 86,
        margin: magrgin ?? EdgeInsets.all(16),
        padding: padding ??
            EdgeInsets.symmetric(
              vertical: 16,
            ),
        decoration: BoxDecoration(
          border: border,
          borderRadius: borderRadius ?? BorderRadius.circular(6),
          color: Colors.white,
        ));
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    tabController = new TabController(length: 3, vsync: this);
    tabController.addListener(() {
      print(tabController.index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 1,
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        titleSpacing: 0.0,
        title: Container(
          padding: EdgeInsets.only(left: 16),
          alignment: Alignment.centerLeft,
          child: GestureDetector(
            child: Row(
              children: <Widget>[
                GestureDetector(
                  child: Icon(
                    IconData(
                      0xe624,
                      fontFamily: 'iconFont',
                    ),
                    size: 18,
                    color: Colors.black87,
                  ),
                  onTap: () {
                    Navigator.pop(context);
                  },
                ),
                Text(
                  '  资产详情',
                  style: TextStyle(color: Colors.black87),
                )
              ],
            ),
            onTap: () {},
          ),
        ),
        automaticallyImplyLeading: false,
      ),
      body: ListView(children: <Widget>[
        Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.white,
                child: Text(
                  '基金名称',
                  style: TextStyle(fontSize: 20),
                ),
                padding: EdgeInsets.only(left: 16, top: 18),
              ),
              Container(
                child: Row(
                  children: <Widget>[
                    Text(
                      '87384',
                    ),
                    Container(
                      padding:
                          EdgeInsets.only(top: 0, left: 4, bottom: 0, right: 4),
                      // width: 56,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(2),
                          color: Color.fromRGBO(250, 31, 31, 0.1)),
                      child: Text(
                        '中高风险',
                        style: TextStyle(color: Colors.redAccent, fontSize: 10),
                      ),
                    ),
                    Expanded(
                      child: Text(''),
                    ),
                    Text(
                      '详情',
                      style: TextStyle(color: Color(0xff3572C9)),
                    )
                  ],
                ),
                padding: EdgeInsets.only(left: 16, right: 16, bottom: 16),
              ),
              Divider(
                height: 1,
              ),
              Container(
                padding: EdgeInsets.only(top: 20, bottom: 18),
                alignment: Alignment.center,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('金额(元)',
                        style: TextStyle(
                          color: Color(0xFF878787),
                          fontSize: 14,
                        )),
                    Container(
                      height: 4,
                    ),
                    Text('87982.2',
                        style:
                            TextStyle(color: Color(0xffF05424), fontSize: 26)),
                  ],
                ),
              ),
              Container(
                padding: EdgeInsets.only(bottom: 24),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Container(
                      child: conmonbox(
                        title: '昨日收益(元)',
                        money: 2339.9,
                        crossAxisAlignment: CrossAxisAlignment.start,
                      ),
                    ),
                    Container(
                        child: conmonbox(
                      title: '持有收益(元)',
                      money: 12339.9,
                      crossAxisAlignment: CrossAxisAlignment.start,
                    )),
                    Container(
                        child: conmonbox(
                      title: '持有收益率',
                      isRate: true,
                      money: 13.5,
                      crossAxisAlignment: CrossAxisAlignment.start,
                    )),
                  ],
                ),
              )
            ],
          ),
          color: Colors.white,
        ),
        cardBox(
            // 收益明细，交易记录我的定投
            child: GridView.count(
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              children: getWidgetList(context),
            ),
            magrgin: EdgeInsets.symmetric(vertical: 10),
            borderRadius: BorderRadius.circular(0)),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 4),
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border(
                  bottom: BorderSide(
                      width: 0.5, color: Colors.grey.withOpacity(0.5)))),
          child: TabBar(
            indicatorColor: Color(0xff3C85A5),
            labelColor: Color(0xff3C85A5),
            unselectedLabelColor: Color(0xff464646),
            controller: tabController,
            labelStyle: TextStyle(fontSize: 16),
            tabs: <Widget>[
              Tab(
                text: '累计盈亏',
              ),
              Tab(
                text: '业绩走势',
              ),
              Tab(
                text: '净值估算',
              ),
            ],
          ),
        ),
        // TabBarView(
        //     controller: tabController,
        //     children: <Widget>[
        //       Text('asdf'),
        //       Text('asdf'),
        //       Text('asdf'),
        //     ],
        //   ),
        Container(
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.only(top: 4),
                  child: Column(
                    children: <Widget>[
                      Text('本基金'),
                      Text(
                        '+26.92%',
                        style: TextStyle(color: Color(0xffF05424)),
                      ),
                    ],
                  )),
              Container(
                  padding: EdgeInsets.only(top: 4),
                  child: Column(
                    children: <Widget>[
                      Text('同类均值'),
                      Text(
                        '+36.55%',
                        style: TextStyle(color: Color(0xffF05424)),
                      ),
                    ],
                  )),
              Container(
                  padding: EdgeInsets.only(top: 4),
                  child: Column(
                    children: <Widget>[
                      Text('沪深300'),
                      Text(
                        '+36.94%',
                        style: TextStyle(color: Color(0xffF05424)),
                      ),
                    ],
                  )),
            ],
          ),
        ),
        LineEcharts(),
        Container(
          color: Colors.white,
          margin: EdgeInsets.only(top: 12),
          child: ListTile(
            leading: Text('涨跌提醒'),
            trailing: Container(
                width: 162.w,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Text('未设置'),
                    Icon(
                      IconData(0xe62d, fontFamily: 'iconFont'),
                      color: Colors.black26,
                      size: 14,
                    ),
                  ],
                )),
          ),
        ),
        Divider(
          height: 0.5,
        ),
        Container(
          color: Colors.white,
          // margin: EdgeInsets.only(vertical: 12),
          child: ListTile(
            leading: Text('粉红方式'),
            trailing: Container(
                width: 162.w,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Text('现金分红'),
                    Icon(
                      IconData(0xe62d, fontFamily: 'iconFont'),
                      color: Colors.black26,
                      size: 14,
                    ),
                  ],
                )),
          ),
        ),
      ]),
      bottomNavigationBar: Container(
        height: 58 +
            MediaQuery.of(context)
                .padding
                .bottom, // 底部需要白色而不是透明，所以通过padding设置，而非safearea
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).padding.bottom),
        decoration: BoxDecoration(
            color: Colors.white,
            border: Border(
                top:
                    BorderSide(width: 1, color: Colors.grey.withOpacity(0.3)))),
        child: Row(
          children: <Widget>[
            Container(
                padding: EdgeInsets.only(top: 4),
                width: 105.w,
                child: ownIconBtn({
                  'icon': 0xe685,
                  'event': () {},
                  'title': '讨论区',
                })),
            VerticalDivider(
              width: 1,
            ),
            Container(
              padding: EdgeInsets.only(top: 4),
              width: 105.w,
              child: ownIconBtn({
                'icon': 0xe60d,
                'event': () {},
                'title': '财富号',
              }),
            ),
            VerticalDivider(
              width: 1,
            ),
            Expanded(
              child: Container(
                alignment: Alignment.center,
                width: 178.w,
                child: Text(
                  '卖出/转换',
                  style: TextStyle(fontSize: 18, color: Color(0xFF188AE3)),
                ),
              ),
            ),
            VerticalDivider(
              width: 1,
            ),
            Container(
              width: 176.w,
              alignment: Alignment.center,
              child: Text(
                '定投',
                style: TextStyle(fontSize: 18, color: Color(0xFF188AE3)),
              ),
            ),
            VerticalDivider(
              width: 1,
            ),
            Container(
              width: 178.w,
              alignment: Alignment.center,
              decoration: BoxDecoration(color: Color(0xFF128EE6)),
              child: Text(
                '买入',
                style: TextStyle(fontSize: 18, color: Color(0xFFfffff3)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
